<!DOCTYPE html>
<html lang="en">
<head>
	<title>昆明信息港设计部门前端储备库——</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" >
  <meta content="zh-CN" http-equiv="Content-Language" >
  <meta content="昆明信息港" name="author" >
  <meta content="昆明信息港版权所有" name="Copyright" >
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://v3.bootcss.com/assets/css/docs.min.css">
<style>
    p{text-indent: 2em;}
    .navbar-brand{
        text-indent:1000px; 
        width: 250px;
        background: url("assets/images/logo.png") left center no-repeat;
        background-size: auto 100%;
    }
</style>
</head>
<body>
<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand"></a>
    </div>
    <nav id="bs-navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="#overview" >概述</a>
        </li>
       
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="http://www.kunming.cn/" target="_blank">昆明信息港</a></li>
      </ul>
    </nav>
  </div>
</header>
<div class="container bs-docs-container">

    <div class="row">
        <div class="col-md-9" role="main">
            <div class="bs-docs-section">
                <h1 id="overview" class="page-header">
                    <a class="anchorjs-link " href="#overview" aria-label="Anchor link for: overview" data-anchorjs-icon="" style="font-family: anchorjs-icons;font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                    综述
                </h1>

                <p class="lead" >随部门设计和前端开发人员的增加，长期以来对代码书写未做规范要求，出现了没有添加内页顶部导航和统计代码等问题。为提高团队协作效率，输出高质量的页面方便统计和管理，特制订此规范文档。
                </p>
                <p class="lead">本规范文档一经确认, 设计和前端开发人员必须按本文档规范进行前台页面开发。本文档今后如有不合适的地方可以及时提出, 经讨论决定后可以更改此文档。</p>
                
                
                
            </div>
             <div class="bs-docs-section">
                 <h1 id="common" class="page-header">
                     <a class="anchorjs-link " href="#common" aria-label="Anchor link for: overview" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                     通用类
                 </h1>
                 <h2 id="common-pageheader">
                    <a class="anchorjs-link " href="#common-pageheader" aria-label="Anchor link for: overview doctype" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                    日常专题类
                </h2>
                <p>
                    通用页头规范按照以下代码进行编码                
                </p>
                
                <div class="highlight">
                    <pre><code class="language-html" data-lang="html">
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"zh-CN"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
  <span class="nt">&lt;title&gt;<span class="s">专题名称</span>_昆明信息港&lt;/title&gt;</span>
  <span class="nt">&lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" &gt;</span>
  <span class="nt">&lt;meta content="zh-CN" http-equiv="Content-Language" &gt;</span>
  <span class="nt">&lt;meta content="昆明信息港" name="author" &gt;</span>
  <span class="nt">&lt;meta content="昆明信息港版权所有" name="Copyright" &gt;</span>
  <span class="nt">&lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;</span>
  <span class="nt">&lt;meta name="renderer" content="webkit" /&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
        <span>...</span>
<span class="nt">&lt;/html&gt;</span></code></pre>
                </div> 
             </div>
             <div class="bs-docs-section">
                 <h1 id="pc" class="page-header">
                     <a class="anchorjs-link " href="#PC" aria-label="Anchor link for: overview" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                     PC类
                 </h1>
                 <h2 id="pc-pageheader">
                    <a class="anchorjs-link " href="#PC-pageheader" aria-label="Anchor link for: overview doctype" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                    通用页头页尾插件
                </h2>
                <p>
                    由于专题设计配色相对于个性和不可控，对头尾菜单和版权信息也存在挑色的问题，所以定义了头尾配色方案供专题设计和开发使用，并在头部菜单中加入统计代码前端开发调用即可                
                </p>
               
                <div class="bs-callout bs-callout-danger" id="callout-tables-striped-ie8">
                    <h4>1、设计师需在头尾库中选择一个配色方案，并将配色方案加入到专题设计中；</h4>
                    <h4>2、前端开发需在头尾库中找到设计稿头尾对应配色方案，并将代码加到专题页面中；</h4>
                    <br>
                    <h4>点击查看通用插件demo <a href="pc-pageheader/html/top_bottom_theme.html">示例页面</a></h4>
                    
                 
                
             </div>
              <p>
                    调用方式:JS，代码示例如下               
                </p>
             <div class="highlight">
                    <pre><code class="language-html" data-lang="html">
//todos...
                    </code></pre>
                </div>
             <div class="bs-docs-section">
                 <h1 id="html5" class="page-header">
                     <a class="anchorjs-link " href="#html5" aria-label="Anchor link for: overview" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                     html5类
                 </h1>
                 <h2 id="html5-rem">
                    <a class="anchorjs-link " href="#html5-rem" aria-label="Anchor link for: overview doctype" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; position: absolute; margin-left: -1em; padding-right: 0.5em;"></a>
                    html5页面制作的rem解决方案
                </h2>
                 <div class="bs-callout bs-callout-danger" id="callout-images-ie-svg">
                     
                      <h4>1单屏设计时，如手机站点首页，因为屏幕宽高比原因，尽量不要在页面下部放置重要元素</h4>
                      <h4>2h5动态专题，滑屏类特效时，问题同上，会造成部分元素在部分机型上无法显示</h4>
                      <h4>3如果用户可操作一直向下滑动，如天猫首页等类似页面，则无影响</h4>
                      <br>
                      <h4>4编码部分查看<a href="h5RemUsage/index.html" target="_blank">demo页面</a></h4>  
               </div>
            </div>
         </div>
        </div>

        <div class="col-md-3" role="complementary">
            <nav id="doc-nav" class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top">
                <ul class="nav bs-docs-sidenav">
                    <li class="">
                        <a href="#overview">概览</a>
                        
                    </li>
                    <li class="">
                        <a href="#common">通用类</a>
                        <ul class="nav">
                            <li class="">
                                <a href="#common-pageheader">日常专题文档规范</a>
                            </li>
                           
                        </ul>
                        
                    </li>
                    <li>
                        <a href="#pc">PC类</a>
                        <ul class="nav">
                            <li class="">
                                <a href="#pc-pageheader">通用头尾插件</a>
                            </li>
                        </ul>
                        
                    </li>
                    <li>
                        <a href="#html5">html5类</a>
                        <ul class="nav">
                            <li class="">
                                <a href="#html5-rem">rem适配方案</a>
                            </li>
                        </ul>
                    </li>

                    
                    

                </ul>
                <a class="back-to-top" href="#top">返回顶部</a>


            </nav>
        </div>

    </div>
</div>
<footer class="bs-docs-footer" role="contentinfo">
  <div class="container">

   
    <p>本文档为内部文档。</p>
    <ul class="bs-docs-footer-links text-muted">
      <li>当前版本： v0.0.1</li>
      <li>·</li>
      <li><a href="http://git.oschina.net/aibokalv/TMDlibrary">GitHub 仓库</a></li>
      <li>·</li>
      
      <li><a href="http://www.kunming.cn/">关于我们</a></li>
      <li>·</li>
      <li>·</li>
      <li>·</li>
      <li>·</li>
    </ul>
  </div>
</footer>
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
  <script src="assets/js/ZeroClipboard.min.js"></script>
  <script src="assets/js/anchor.min.js"></script>
  <script src="assets/js/docs.js"></script>


</body>
</html>